<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
	<head>
		<title>Write Store</title>
 		<style type='text/css'>
		  @import url('ext/resources/css/ext-all.css');
		  @import url('ext/resources/css/xtheme-aero.css');
		</style>
		<style>
			#persons {
				position: absolute;
				left: 5%;
				top: 10%;
				width: 25%;
				height: 150px;
			}		
			#grids {
				position: relative;
				left: 5%;
				top: 10%;
				width: 100%;
				height: 150px;
			}		
			#contacts {
				position: absolute;
				left: 50%;
				top: 10%;
				width: 25%;
				height: 150px;
			}		
			#content {
				position: absolute;
				left: 5%;
				top: 10%;
				width: 50%;
				height: 300px;
			}		
		</style>
		<script type="text/javascript" src="ext/ext-base.js"></script>
		<script type="text/javascript" src="ext/ext-all-debug.js"></script>
		<!-- localXHR required if sample-data.json from file:// instead of http:// -->
		<script type="text/javascript" src="localXHR2.js"></script>
		<script type="text/javascript" src="write-store.js"></script>
		<script type="text/javascript">
		Ext.onReady(function(){
			init();
		});
		var storeA, storeB, persons, addresses;
		var init = function() {
			var Person = Ext.data.Record.create([{name: 'firstName'},{name: 'lastName'},{name: 'address'}]);
			var Address = Ext.data.Record.create([{name: 'number'},{name: 'street'}])
			storeA = new Ext.ux.WriteStore({
				proxy: new Ext.ux.HttpWriteProxy({url: 'sample-data.json'}),
				updateProxy: new Ext.ux.HttpWriteProxy({url: 'updateSampleData.php'}),
				replaceWrite: true,
				reader: new Ext.ux.JsonWriterReader({
					root: 'person',
					id: 'id'
				},Person)
			});
			
			persons = new Ext.grid.EditorGridPanel({
				renderTo: 'persons',
				store: storeA,
				columns: [
					{
						header: 'Last Name',
						width: 100, 
						dataIndex: 'lastName', 
						sortable:true,
						editor: new Ext.form.TextField({})						
					},
					{
						header: 'First Name',
						width: 80, 
						dataIndex: 'firstName', 
						sortable:true,
						editor: new Ext.form.TextField({})						
					}
				],
				width: 200,
				autoHeight: true,
				frame: true,
				title: 'Persons',
				enableColumnHide: false,
				tbar: [{
						text: 'Save Changes',
						handler: function() {
							storeA.commitChanges();
						}
					}]				
			});
			storeA.load();
			// do some stuff with storeA

			// configure storeB to get its information from storeA, using the field in a record of address
			var sp = new Ext.ux.StoreProxy({store: storeA, field: 'address'});
			storeB = new Ext.ux.WriteStore({
				proxy: sp,
				updateProxy: sp,
				replaceWrite: true,
				reader: new Ext.ux.ObjectReader({},Address)
			});
			
			// grid for addresses
			addresses = new Ext.grid.EditorGridPanel({
				renderTo: 'contacts',
				store: storeB,
				columns: [
					{
						header: 'Number',
						width: 100, 
						dataIndex: 'number', 
						sortable:true,
						editor: new Ext.form.TextField({})						
					},
					{
						header: 'Street',
						width: 80, 
						dataIndex: 'street', 
						sortable:true,
						editor: new Ext.form.TextField({})						
					}
				],
				width: 200,
				autoHeight: true,
				frame: true,
				title: 'Addresses',
				enableColumnHide: false,
				tbar: [{
						text: 'Save Changes',
						handler: function() {
							storeB.commitChanges();
						}
					}]
			});
			
			// set up the click to load the details
			persons.on('rowclick',function(grid,rowIndex,e){
				var record = grid.getStore().getAt(rowIndex);
				storeB.load({params: {id: record.id}});
			});
			
			// do some stuff with storeB
			//storeB.commitChanges();
			//storeA.commitChanges();
			
		}
		</script>
	</head>
	<body>
		<div id="content">
			<div id="instructions">
			The grid on the left is the list of persons. The one on the right is the addresses for the selected person. Select a person on the left to view their addresses on the right. <br/>
			Double-click on any cell to edit it. The 'Save' button calls commitChanges() on the appropriate Store.<br/>
			Only one store goes back to the Webserver, storeA, the one for the list of persons. The list of addresses for each person is taken from storeA to storeB and committed back via a StoreProxy().
			</div>
			<div id="grids">
				<div id="persons">
				</div>
				<div id="contacts">
				</div>
			</div>
		</div>
	</body>
</html>